<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      height: 100%;
    }

    body {
      height: 100%;
      background-color: pink;
    }
  </style>
</head>
<!-- 
  speak() 将对应的实例添加到语音队列中
  cancel() 删除队列中所有的语音.如果正在播放,则直接停止
  pause() 暂停语音
  resume() 恢复暂停的语音
  getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效
-->

<body>
  <button id="btn">播放声音了吧</button>
</body>
<script>
  "use strict"; {
    const voiceMsg = new SpeechSynthesisUtterance();
    speechSynthesis.addEventListener("voiceschanged", function (res) {
      this.getVoices().forEach((item, index, arr) => {
        console.log(`类型:${item.lang}   语言:${item.name}`);
      });
    });
    // 设置播放的声音(英语、汉语、粤语)但设置失败了
    // voiceMsg.lang = "zh-HK";
    // 设置/获取所播放的内容
    voiceMsg.text = "hi";
    document.getElementById("btn").addEventListener("click", () => {
      // 音量，数值，默认值是1，范围: 0~1
      voiceMsg.volume = 1;
      // 语速，数值，默认是1，范围: 0.1~10
      voiceMsg.rate = 1.5;
      // 声高，数值，默认值是1，范围: 0~2
      voiceMsg.pitch = 2;
      // 将对应的实例添加到语音队列中
      speechSynthesis.speak(voiceMsg);
    });
  };
</script>

</html>